<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 侦听器是可以使用异步 -->
      <!-- 如果能用计算属性的时候就用计算属性，只有当异步或者开销较大的时候用watch -->
      <input type="text" v-model="value" />

      <hr />

      <p>count: {{ count }}</p>
      <p>doubleCount: {{ doubleCount }}</p>
      <button @click="count++">btn</button>

      <hr />

      <p>num: {{ num }}</p>
      <p>doubleNum: {{ doubleNum }}</p>
      <button @click="num++">btn2</button>

      <hr />

      <input type="text" v-model="firstName" /> +
      <input type="text" v-model="lastName" />
      <p>全名: {{ fullName }}</p>
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      Vue.createApp({
        data() {
          return {
            value: "",
            count: 1,
            num: 1,
            doubleNum: 0,
            firstName: "zhang",
            lastName: "san",
            fullName: "zhang san",
          };
        },
        computed: {
          doubleCount() {
            return this.count * 2;
          },
          // fullName() {
          //   return this.firstName + " " + this.lastName;
          // },
        },
        watch: {
          value(val) {
            // 发起请求
            setTimeout(() => {
              console.log(val);
            }, 500);
          },
          // num(val) {
          //   this.doubleNum = val * 2;
          // },
          num: {
            handler(val) {
              this.doubleNum = val * 2;
            },
            immediate: true,
          },
          firstName(val) {
            this.fullName = val + " " + this.lastName;
          },
          lastName(val) {
            this.fullName = this.firstName + " " + val;
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
